<template>
	<view class="content">
		<image :src="$getPicture(shopDetail.shopUrl)" style="width: 100%; height: 500rpx;"></image>
		<view class="shopDetail">
			<view class="modelStyle">{{shopDetail.shopName}}</view>
			<view class="smallModel">月售：{{shopDetail.shopSales}}</view>
			<view class="modelStyle">
				<view style="flex: 1;">￥{{shopDetail.shopAmount}}</view>
				<view style="width: 200rpx; display: flex; align-items: center; ">
					<!-- <view v-if="food.shopSpecificationVOList.length > 0"></view> -->
					<view class="allCenter" style=" flex: 1;">
						<image src="../../static/des.png" class="food-count" @click="decrease()"></image>
						<view style="margin: 0 10rpx;font-weight: normal;">{{shopNum}}</view>
						<image src="../../static/add2.png" class="food-count" @click="add()">
					</view>
				</view>
			</view>
		</view>
		<view class="shopDetail" style="margin-top: 20rpx; height: auto;">
			<view style="font-weight: bold;font-size: 34rpx; padding: 20rpx 0 0 20rpx;">商品详情</view>
			<view style="padding: 20rpx 0 20rpx 20rpx; font-size: 30rpx;">{{shopDetail.shopIntroduce}}</view>
		</view>
		<view class="bottomModel">
			<view style="flex: 1; display: flex; align-items: center;">
				<view class="bottomIcon">
					<image src="../../static/homeOrder.png" style="width: 40rpx; height: 40rpx;" @click="toHome()">
					</image>
					<view style="font-size: 24rpx;">首页</view>
				</view>
				<view class="bottomIcon">
					<view v-if="allSaleCount>0" class="cartCount">{{allSaleCount}}</view>
					<image src="../../static/cart.png" style="width: 40rpx; height: 40rpx;" @click="toCart()"></image>
					<view style="font-size: 24rpx;">购物车</view>
				</view>
			</view>
			<view style="width: 400rpx; height: 100%; display: flex; align-items: center;">
				<view class="cartStyle" @click="addToCart()">
					加入购物车
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import common from "../../common/common.js"
	export default {
		data() {
			return {
				shopId: 0, //商品编号
				tableId: 0, //餐桌号
				shopDetail: {}, //商品详情
				shopNum: 1, //商品数量
				allSaleCount: 0, //购物车总数量
				openCart:1
			}
		},
		onLoad(option) {
			this.shopId = option.shopId;
			this.tableId = option.tableId;
			this.getShopDetial();
			this.getAllCartCount();
		},
		methods: {
			//显示商品详情
			getShopDetial() {
				common.get({
					url: '/orderEat/shopInfo/' + this.shopId,
					success: (res) => {
						this.shopDetail = res.data;
					}
				})
			},
			//显示购物车总数量
			getAllCartCount() {
				common.get({
					url: '/orderEat/shopInfo/cartNumCount/' + this.tableId,
					success: (res) => {
						this.allSaleCount = res.msg;
					}
				})
			},
			//购物车增加
			add() {
				this.shopNum += 1;
			},
			//购物车减少
			decrease() {
				if (this.shopNum > 0) {
					this.shopNum -= 1
				}
			},
			//加入购物车
			addToCart() {
				common.post({
					url: '/orderEat/shopInfo/addCartShopBatch',
					formData: {
						shopId: this.shopDetail.shopId,
						shopName: this.shopDetail.shopName,
						shopPic: this.shopDetail.shopUrl,
						shopAmount: this.shopDetail.shopAmount,
						shopNum: this.shopNum,
						tableId: this.tableId
					},
					success: (res) => {
						this.shopNum = 1;
						this.getAllCartCount();
					}
				})
			},
			//返回首页
			toHome(){
				uni.switchTab({
					url:"/pages/login/login"
				})
			},
			//返回购物车页并打开购物车
			toCart(){
				uni.navigateTo({
					url:"/pages/index/index?openCart="+this.openCart+"&tableNum="+this.tableId
				})
			}

		}
	}
</script>

<style>
	.content {
		width: 100%;
		height: 100vh;
		background-color: #f3f5f7;
	}

	.shopDetail {
		background-color: #fff;
		width: 100%;
		height: 200rpx;
		display: flex;
		flex-direction: column;
	}

	.food-count {
		width: 20px;
		height: 20px;
		color: #CCCCCC;
	}

	.modelStyle {
		flex: 1;
		display: flex;
		align-items: center;
		padding-left: 30rpx;
		font-weight: bold;
		font-size: 34rpx;
	}

	.smallModel {
		flex: 1;
		display: flex;
		align-items: center;
		padding-left: 28rpx;
		font-size: 30rpx;
	}

	.bottomModel {
		display: flex;
		align-items: center;
		width: 100%;
		height: 80rpx;
		font-size: 28rpx;
		background-color: #fff;
		position: fixed;
		/* 固定定位 */
		bottom: 0px;
		/* 距离底部为0后即可固定在底部 */
	}

	.bottomIcon {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	.cartStyle {
		width: 95%;
		height: 80%;
		border-radius: 70rpx;
		background-color: orange;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.cartCount {
		position: absolute;
		right: 16px;
		top: 0;
		display: inline-block;
		padding: 0 6px;
		font-size: 9px;
		line-height: 16px;
		font-weight: 400;
		border-radius: 10px;
		background-color: #f01414;
		color: #ffffff;
	}
</style>